<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" th:attr="content='123'"  content="">
    <meta name="author" th:attr="content='123'" content="">
    <link rel="icon" type="image/png" sizes="16x16" th:href="@{/assets/images/favicon.png}">
    <title> 用戶登陆</title>
    <link th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}"  rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/css/colors/blue.css}" id="theme" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <div class="preloader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
    </div>

    <section id="wrapper">
        <div class="login-register" th:style="'background-image:url('+@{/assets/images/background/login-register.jpg}+');'">
            <div class="login-box card">
            <div class="card-body">
                <form class="form-horizontal form-material" id="loginform" method="post" th:action="@{/login}">
                    <h3 class="box-title m-b-20">用戶登陆</h3>
                    <div class="form-group ">
                        <div class="col-xs-12">
                            <input class="form-control" name="username" type="text" required="" placeholder="账号"> </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <input class="form-control" name="password" type="password" required="" placeholder="密码"> </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <div class="checkbox checkbox-primary pull-left p-t-0">
                                <input id="checkbox-signup" name="rememberMe" value="true" type="checkbox">
                                <label for="checkbox-signup"> 记住我 </label>
                            </div> <a href="javascript:void(0)" id="to-recover" class="text-dark pull-right"><i class="fa fa-lock m-r-5"></i> 忘记密码?</a> </div>
                    </div>
                    <div class="form-group text-center m-t-20">
                        <div class="col-xs-12">
                            <button class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light" type="submit">登 陆</button>
                        </div>
                    </div>
                    <div class="form-group m-b-0">
                        <div class="col-sm-12 text-center">
                            <p>还没有账户? <a href="register.html" class="text-info m-l-5"><b>注册</b></a></p>
                        </div>
                    </div>
                </form>
                <form class="form-horizontal" id="recoverform" action="index.html">
                    <div class="form-group ">
                        <div class="col-xs-12">
                            <h3>找回密码</h3>
                            <p class="text-muted">请输入您的电子邮件！</p>
                        </div>
                    </div>
                    <div class="form-group ">
                        <div class="col-xs-12">
                            <input class="form-control" type="text" required="" placeholder="Email"> </div>
                    </div>
                    <div class="form-group text-center m-t-20">
                        <div class="col-xs-12">
                            <button class="btn btn-primary btn-lg btn-block text-uppercase waves-effect waves-light" type="submit">Reset</button>
                        </div>
                    </div>
                </form>
            </div>
          </div>
        </div>
    </section>

    <script th:src="@{/assets/plugins/jquery/jquery.min.js}" ></script>
    <script th:src="@{/assets/plugins/bootstrap/js/popper.min.js}" ></script>
    <script th:src="@{/assets/plugins/bootstrap/js/bootstrap.min.js}" ></script>
    <script th:src="@{js/jquery.slimscroll.js}"  ></script>
    <script th:src="@{/js/waves.js}" ></script>
    <script th:src="@{/js/sidebarmenu.js}" ></script>
    <script th:src="@{/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js}" ></script>
    <script th:src="@{/assets/plugins/sparkline/jquery.sparkline.min.js}" ></script>
    <script th:src="@{/js/custom.min.js}" ></script>
    <script th:src="@{/assets/plugins/styleswitcher/jQuery.style.switcher.js}" ></script>
</body>

</html>